import * as React from 'react';
import Header from '@/commonComponents/header/Header';
import useAuth from '@/utils/hooks/useAuth';
import UserHeader from '@/commonComponents/userHeader/index';
import { Button, Form, Input, Modal, Toast } from 'antd-mobile';
import { getToken, getUserInfo } from '../../utils/localStorge';
import { useNavigate } from 'react-router-dom';
import './index.module.scss';
const { useEffect, memo, useState } = React;

interface upadtedpwdProps {
  password: string;
}
function Setting() {
  const token = getToken();
  const { back } = useAuth();
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const formData = { password: '' };
  const confirmPwd = (val: upadtedpwdProps) => {
    const currentpwd = localStorage.getItem('password');
    if (val.password !== currentpwd) {
      Toast.show({
        content: '你输入的当前密码不正确！',
        position: 'top',
      });
    } else {
      navigate('/modifypwd');
    }
  };
  return (
    <div styleName="confirmpwd-content">
      <Header
        title={``}
        onBack={back}
        style={{
          background: '#fff',
          color: '#333',
        }}
        type={1}
      />
      <div styleName="notice-word">
        <div styleName="word1">请输入当前密码</div>
        <div styleName="word2">需要输入您账号当前设置的密码</div>
      </div>
      <Form
        form={form}
        onFinish={confirmPwd}
        layout="horizontal"
        mode="card"
        initialValues={formData}
        footer={
          <Button type="submit" styleName="confirm-btn" fill="solid">
            下一步
          </Button>
        }
      >
        <Form.Item
          name="password"
          label="当前密码"
          rules={[
            { required: true, message: '请输入当前账户密码!' },
            { type: 'string' },
          ]}
        >
          <Input placeholder="请输入当前账户密码" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default memo(Setting);
